<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册用户信息</title>
    <link rel="stylesheet" type="text/css" href="/secondhand/css/query.css" />
    <script type="text/javascript" src="/secondhand/js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function() {
            // 表单提交验证
            $("form").submit(function() {
                if ($("input[name='username']").val().trim() == "") {
                    alert("用户名不能为空");
                    return false;
                }
                if ($("input[name='userfullname']").val().trim() == "") {
                    alert("昵称不能为空");
                    return false;
                }
                if ($("input[name='password']").val().trim() == "") {
                    alert("密码不能为空");
                    return false;
                }
                if ($("input[name='phone']").val().trim() == "") {
                    alert("手机号码不能为空");
                    return false;
                }
            });

            // 手机号码验证
            $("input[name='phone']").change(function() {
                var phone = $(this).val();
                var reg = /^1[3-9]\d{9}$/;
                if (reg.test(phone)) {
                    $("#message").empty();
                    checkedSpan();
                } else {
                    $("#message").empty().html("对不起，手机号码输入不规范");
                    $("input[type='submit']").attr("disabled", true);
                }
            });

            // 用户名检查
            $("#username").change(function () {
                var url = "/secondhand/checkedusername.User";
                var paramCategoryName = {
                    "username": $(this).val()
                };
                $.post(url, paramCategoryName, function (data) {
                    var flagObj = JSON.parse(data);
                    if (flagObj.flag == 0) {
                        $("#message0").empty().html("该名称已存在！");
                        $("#submit").prop("disabled", true);
                    } else {
                        $("#message0").empty();
                        $("#submit").prop("disabled", false);
                    }
                })
            })

            // 统一判断是否将按钮启用
            function checkedSpan() {
                var flag = $(".message").text();
                if (flag.length == 0) {
                    $("input[type='submit']").attr("disabled", false);
                }
            }
        });
    </script>
</head>
<body>
<div id="top">·当前位置： 用户管理 -- 注册用户</div>
<form action="/secondhand/addUser.User" method="post">
    <table id="tab" style="margin-top: 30px;border-collapse:separate; border-spacing:0px 10px;">
        <tr>
            <td align="right" style="width: 40%;">用户ID : </td>
            <td align="left">&nbsp;<input type="text" placeholder="用户ID自动生成" readonly/></td>
        </tr>
        <tr>
            <td align="right" style="width: 40%;">用户名 : </td>
            <td align="left">&nbsp;<input type="text" name="username" id="username"/><span style="color: red"> *</span><span
                    id="message0" class="message" style="color: red"></span></td>
        </tr>
        <tr>
            <td align="right" style="width: 40%;">昵称 : </td>
            <td align="left">&nbsp;<input type="text" name="userfullname" id="userfullname"/><span style="color: red"> *</span></td>
        </tr>
        <tr>
            <td align="right" style="width: 40%;">密码 : </td>
            <td align="left">&nbsp;<input type="password" name="password"/><span style="color: red"> *</span></td>
        </tr>
        <tr>
            <td align="right" style="width: 40%;">手机号码 : </td>
            <td align="left">&nbsp;<input type="text" name="phone"/><span style="color: red"> *</span><span
                    id="message" class="message" style="color: red"></span></td>
        </tr>
        <tr>
            <td colspan="2"><input style="width: 60px;" type="submit" value="注册" id="submit"/></td>
        </tr>
    </table>
</form>

</body>
</html>
